<template>
  <div class="header-bar">
    <div> =</div>
    <div class="title">
      <dv-decoration-3 style="width:100px;height:30px;" />
      <span>火箭班精细化管理系统</span>
      <dv-decoration-3 style="width:100px;height:30px;" />
    </div>
    <div>
      <button @click="showPopup2 = true">导入成绩</button>
      <popup title="导入数据" :visible.sync="showPopup">
        <el-steps :active="initActive" align-center style="margin-top: 40px;">
          <el-step title="座位表"></el-step>
          <el-step title="课程表"></el-step>
          <el-step title="成绩导入"></el-step>
        </el-steps>
        <KeepAlive>
          <edit-seat-table v-if="initActive == 1" />
          <edit-subject v-if="initActive == 2" />
          <score-import v-if="initActive == 3" />
        </KeepAlive>
      </popup>
      <popup title="导入成绩" :visible.sync="showPopup2" v-if="!showPopup">
        <score-import />
      </popup>
    </div>
  </div>
</template>

<script>
import storage from '@/utils/storage'

export default {
  name: 'header-bar',
  data () {
    return {
      showPopup: false,
      showPopup2: false,
      initActive: 1
    }
  },
  created () {
    if (!storage.getItem('seat')) {
      this.showPopup = true
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bar {
  @include wh(auto, 65px);
  @include flex(row, center, space-between);
  background: url(../../assets/images/header-bar.png) no-repeat center center;
  background-size: 100% auto;
  .title {
    color: #fff;
    line-height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      padding: 0 50px;
      font-size: 20px;
    }
  }
}
</style>
